<template>
  <div v-if="reload" class="app-container">
    <el-header style="margin-bottom:10px;">
       <slot name="add">
         <el-button type="primary" @click="handleAdd">新建
           <i class="el-icon-plus el-icon--right" />
         </el-button>
       </slot>
      <slot name="reload">
        <el-button type="danger" @click="handReload">
          刷新
          <i class="el-icon-refresh el-icon--right" />
        </el-button>
      </slot>
    </el-header>
    <!-- 表格 begin-->
    <el-table
      :data="pagelist"
      border
      style="width: 100%"
      highlight-current-row
      row-class-name="cxgl__table__row"
      v-loading="loading"
    >
      <template v-for="(item,index) in tableField" >
        <el-table-column
          :prop = "item.prop"
          :label = "item.label"
          :align = "item.align"
          :width = "item.width"
          :key = "index"
        ></el-table-column>
      </template>
      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleState(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--表格 end-->
    <!-- 分布列表 begin -->
    <el-footer style="margin-top:10px;">
      <el-pagination
        :page-size=paginationDate.rows
        :total=paginationDate.total
        :current-page=paginationDate.cuurentPage
        :page-sizes=paginationDate.pageSizes
        layout='total, prev, pager, next, jumper, sizes, slot'
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        style="line-height: 30px;"
      >
        <i @click="handReload" class="el-icon-refresh"></i>
      </el-pagination>
    </el-footer>
    <!-- 分页列表 end -->

  </div>
</template>

<script>

export default {
  data() {
    return {
      pagelist: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入餐型名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        abbreviation: [
          { required: true, message: '请输入餐型简称', trigger: 'blur' },
          { min: 1, max: 2, message: '长度为 1 到 个字符', trigger: 'blur' }
        ],
        mealTime: [
          { required: true, message: '输入的备餐时间不合法', trigger: 'blur' }
        ],
        deliveryTime: [
          { required: true, message: '请输入送餐时间不合法', trigger: 'blur' }
        ],
        haveMealsTime: [
          { required: true, message: '请输入用餐时间', trigger: 'blur' }
        ]
      },
      reload: true,
      editState: false,
      paginationDate: {
        total: 10,
        cuurentPage: 1,
        rows: 10,
        pageSizes: [10, 20, 30, 50]
      },
      loading: true
    }
  },
  props: {
    tableField: {
      type: Array,
      default() {
        return []
      },
      require: true
    }
  },
  async mounted() {

  },
  methods: {
    handleEdit(index, row) {
      this.form = { ...row }
      this.dialogFormVisible = true
      this.editState = true
    }
  }
}
</script>

<style scoped>

</style>
